<style>
    .twoDiv{
        padding: 10px 0px;
        border-bottom: 1px solid #f6f6f6;
        color: #333;
        height: 120px;
    }
    .three{
        height: 500px;
        padding: 10px 0px;
    }
</style>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">数据概览</div>

                        <div class="layui-card-body">
                            <div class="twoDiv ">
                                <form class="layui-form layui-form-pane" action="#" lay-filter="example">
                                    <div class="layui-col-md3">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">运输单号：</label>
                                            <div class="layui-inline">
                                                <input type="text" name="shipping" id="shipping" lay-verify="required" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">开单时间：</label>
                                            <div class="layui-inline">
                                                <input type="text" name="billingtime" id="billingtime" lay-verify="date1" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">开单员：</label>
                                            <div class="layui-inline">
                                                <input type="text" name="billingclerk" id="billingclerk" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">发车时间：</label>
                                            <div class="layui-inline">
                                                <input type="text" name="departuretime" id="departuretime" lay-verify="date1" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">到达分站：</label>
                                            <div class="layui-inline">
                                                <select name="city">
                                                    <option value=""></option>
                                                    <option value="0">北京</option>
                                                    <option value="1">上海</option>
                                                    <option value="2">广州</option>
                                                    <option value="3">深圳</option>
                                                    <option value="4">杭州</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">到达城市：</label>
                                            <div class="layui-inline">
                                                <input type="text" name="getcity" id="getcity" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">收货人：</label>
                                            <div class="layui-inline">
                                                <input type="text" name="consignee" id="consignee" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-form-item">
                                            <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="formDemo">查询</button>
                                            <button type="button" id="updagreement" class="layui-btn layui-btn-normal layui-btn-sm">修改协议</button>
                                            <button type="button" id="delagreement" class="layui-btn layui-btn-normal layui-btn-sm">协议删除</button>
                                        </div>
                                    </div>

                                </form>
                            </div>
                            <div class="three" >
                                <table class="layui-hide" id="start" lay-filter="start"></table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="details">详情</a>
</script>
<script>
    layui.use(['table', 'form', 'jquery', 'layer', 'tree','util'], function () {
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,table = layui.table;
        var $ = layui.jquery;

        //日期初始化
        form.render();

        var tableIns=table.render({
            elem: '#start'
            ,url:'../../../querystart.action'
            ,title: '用户数据表'
            ,height:500
            ,cols: [[
                {type:'checkbox'}
                ,{field:'shipping', title:'运输单号', width:150, sort: true}
                ,{field:'departuretime', title:'发车时间', width:150 }
                ,{field:'transportstatus', title:'运输状态', width:150}
                ,{field:'arrivetostation', title:'到达分站', width:150}
                ,{field:'getcity', title:'到达城市',width:150}
                ,{field:'consignee', title:'收货人', width:150}
                ,{field:'receivingunit', title:'收货单位', width:150}
                ,{field:'wagonnumber', title:'车号', width:150}
                ,{field:'drivers', title:'司机', width:150}
                ,{field:'driversphone', title:'司机电话', width:150}
                ,{field:'namegoods', title:'货物名称', width:150}
                ,{field:'goodsquantity', title:'货物数量', width:150}
                ,{field:'goodsweight', title:'货物重量', width:150}
                ,{field:'goodsvolume', title:'货物体积', width:150}
                ,{field:'vehicleremark', title:'车辆备注', width:150}
                ,{field:'billingtime', title:'开单时间', width:150}
                ,{field:'billingclerk', title:'开单员', width:150}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:80}
            ]]
            ,page: true
        });

        /*监听行内按钮*/
        table.on('tool(test)',function (obj) {
            switch (obj.event) {
                case 'details':
                    var consignmentid=obj.data.consignmentid;
                    idqueryDate(consignmentid);
                    break;
                default:
                    break;
            }
        });
        /*通过点击按钮获取数据表格里的数值*/
        $("#updagreement").on("click",function(){
            var table = layui.table;
            var checkStatus = table.checkStatus('start');
            var shipping="";
            for(var i=0; i<checkStatus.data.length; i++){
                shipping += checkStatus.data[i].shipping;
                if(i !=checkStatus.data.length-1){
                    shipping += ",";
                }
            }
            //查询协议信息
            updagreementDate(shipping);
        });

        /*通过点击按钮获取数据表格里的数值*/
        $("#delagreement").on("click",function(){
            var table = layui.table;
            var checkStatus = table.checkStatus('start');
            var shipping="";
            for(var i=0; i<checkStatus.data.length; i++){
                shipping += checkStatus.data[i].shipping;
                if(i !=checkStatus.data.length-1){
                    shipping += ",";
                }
            }
            alert(shipping);
            //删除协议信息
            delagreementDate(shipping);
        });
        /*通过运输单号删除协议信息*/
        function delagreementDate(shipping) {
            layui.use(['layer','table','jquery'], function(){
                var layer = layui.layer;
                var table = layui.table;
                var $ = layui.jquery;
                layer.open({
                    content: '测试回调',
                    //大小
                    area:['300px', '180px'],
                    btn: ['确定','取消'],
                    content: '是否确定要删除此行?',
                    yes: function(index,kskks){
                        $.ajax({
                            url:'../../../delectdepartlist.action',
                            type:'post',
                            data:{
                                shipping:shipping
                            },
                            success:function(data){
                                //表刷新方法
                                reloads();
                            }
                        });
                        layer.close(index);
                    }

                });
            });
        }
        /*通过运输单号查询协议信息*/
        function updagreementDate(shipping) {
            layui.use(['table','jquery','form'], function(){
                var form = layui.form;
                var table = layui.table;
                var $ = layui.jquery;
                $.ajax({
                    url : '../../../selectbyid.action',
                    method : 'post',
                    data :{
                        shipping:shipping
                    } ,
                    dataType:"json",
                    success:function(data) {
                        //弹出层
                        agreepop();
                        /* 必须使用延时器否则有时候出不来 */
                        setTimeout(function(){
                            //jquery获取内嵌框架对象
                            var agree = $("#agree").contents();
                            //获取要修改的数据显示到文本框中
                            agree.find("#shipping").val(data.Startlist.shipping);
                            agree.find("#departuretime").val(data.Startlist.departuretime);
                            agree.find("#transportstatus").val(data.Startlist.transportstatus);
                            agree.find("#arrivetostation").val(data.Startlist.arrivetostation);
                            agree.find("#getcity").val(data.Startlist.getcity);
                            agree.find("#consignee").val(data.Startlist.consignee);
                            agree.find("#receivingunit").val(data.Startlist.receivingunit);
                            agree.find("#wagonnumber").val(data.Startlist.wagonnumber);
                            agree.find("#drivers").val(data.Startlist.drivers);
                            agree.find("#driversphone").val(data.Startlist.driversphone);
                            agree.find("#namegoods").val(data.Startlist.namegoods);
                            agree.find("#goodsquantity").val(data.Startlist.goodsquantity);
                            agree.find("#goodsweight").val(data.Startlist.goodsweight);
                            agree.find("#goodsvolume").val(data.Startlist.goodsvolume);
                            agree.find("#vehicleremark").val(data.Startlist.vehicleremark);
                            agree.find("#billingtime").val(data.Startlist.billingtime);
                            agree.find("#billingclerk").val(data.Startlist.billingclerk);
                            reloads();
                        },500);
                    }
                });
            });
        }

        /*表单提交*/
        form.on('submit(formDemo)', function(data){
            tableIns.reload({
                type:'post'
                ,url:'../../../wherestart.action',
                where: {
                    //设定异步数据接口的额外参数，任意设
                    shipping:data.field.shipping
                    ,departuretime:data.field.departuretime
                    ,billingtime:data.field.billingtime
                    ,billingclerk:data.field.billingclerk
                    ,arrivetostation:data.field.arrivetostation
                    ,getcity:data.field.getcity
                    ,consignee:data.field.consignee
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });


        /* 表刷新方法 */
        function reloads(){
            layui.use('layer', function(){
                var table = layui.table;
                table.reload('start');
            });
        }
        /*弹出层运单详情*/
        function agreepop(){
            layui.use('layer', function(){
                var layer = layui.layer;
                layer.open({
                    skin:'layui-layer-molv',//皮肤
                    content: '测试回调',
                    //大小
                    area:['90%', '650px'],
                    btn: [],
                    content: '<iframe src="/src/views/transportation/iframe/updateagreezd.html" id="agree" width="100%" height="100%" frameborder="0"/>',
                    closeBtn: 2, //关闭按钮样式默认1
                    anim:4 //设置关闭动画
                });
            });
        }

    });
</script>


